<template>
  文本框：
  <input type="text"
    v-model="refText"
    title="提示信息"
    maxLength="10"
    placeholder="直接设置占位信息"
    @input="myInput"
  /><br>
  值：{{refText}}<br>
  下拉列表框：
  <select v-model="refSelect" @change="myChange">
    <option value="1">选项一</option>
    <option value="2">选项二</option>
  </select><br>
  值：{{refSelect}}<br>

  <hr>
  
  文本框：
<input type="text"
  v-model="refText"
  v-bind="textProps"
  @input="myInput"
/><br>
  值：{{refText}}<br>

  下拉列表框：
<select v-model="refSelect" @change="myChange">
  <option v-for="(item, index) in selectProps.optionList"
    :key="index"
    :value="item.value"
  >
    {{item.label}}
  </option>
</select><br>
  值：{{refSelect}}<br>
  <input type="button" value="修改属性" @click="changeProps"/>
</template>

<script>
import { reactive, ref } from 'vue'
import { lifecycle } from '/nf-ui-core'

</script>

<script setup>
lifecycle('原生HTML的测试', true)

  // 文本框的值
  const refText = ref('')
  // 文本框的属性
const textProps = reactive({
  title: '提示信息',
  maxLength: 10,
  placeholder: '占位信息',
  disabled: false
})

  // 修改属性的事件
  const changeProps = () => {
    textProps.title = new Date().valueOf()
    textProps.maxLength += 1
    textProps.disabled = !textProps.disabled
  }

  // 文本框的输入事件
  const myInput = (e) => {
    console.log('input 的 input事件：', e)
  }

  // 下拉列表框的值
  const refSelect = ref('')
  // 下拉列表框的选项
  const selectProps = reactive({
    optionList: [
      {"value": '1', "label": '选项一'},
      {"value": '2', "label": '选项二'},
      {"value": '3', "label": '选项三'}
    ]
  })

  // 选择事件
  const myChange = (e) => {
    console.log('select 的 change 事件：', e)
  }
</script>